<template>
  <div>
    <el-input v-model="phone" placeholder="手机号" clearable size="medium"></el-input>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-input
            @keyup.enter.native="login()"
            v-model="code"
            placeholder="验证码"
            clearable
            class="margin"
            style="width: 100%;"
        />
      </el-col>
      <el-col :span="8">
        <div
            @click="smsCode"
            :class="time === 0 ? 'smc-code' : 'no-smc-code'"
        >{{ time === 0 ? '发送验证码' : `剩余${time}秒` }}</div>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;border: #ccc solid 1px;border-radius: 4px">
      <drag-verify
          ref="dragVerify"
          :width="334"
          :isPassing.sync="isPassing"
          text="请按住滑块拖动"
          successText="验证通过"
          handlerIcon="el-icon-d-arrow-right"
          successIcon="el-icon-circle-check"
          @passcallback="pass"
      >
      </drag-verify>
    </el-row>
    <div class="submit">
      <el-button type="primary" @click="openlogin" class="submit-btn">登录</el-button>
    </div>
  </div>
</template>

<script>
import dragVerify from 'vue-drag-verify2'

export default {
  name: 'PhoneLogin',
  components: {
    dragVerify
  },
  data () {
    return {
      phone: '',
      code: '',
      time: 0,
      isPassing: false
    }
  },
  methods: {
    pass () {
      this.isPassing = true
    },
    toindex () {
      this.$message.success('登录成功')
      this.$router.push({ name: 'Index' })
    },
    openlogin () {
      if (this.code.length < 1) {
        this.$message.error('验证码不能为空')
      } else if (this.code.length !== 4) {
        this.$message.error('验证码错误')
      }
    },
    login () {
    },
    smsCode () {
      if (this.phone.length !== 11) {
        this.$message.error('手机号不正确')
      } else if (this.time !== 0) {

      } else {
        this.$ICommonProxy.SendSMSCode(this.phone, res => {
          this.time = res
          const setTime = setInterval(() => {
            if (this.time === 0) {
              clearInterval(setTime)
            } else {
              this.time--
            }
          }, 1000)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin smc-btn {
  width: 100%;
  margin-top: 10px;
  height: 36px;
// font-weight: bold;
  border-radius: 4px;
  float: right;
  line-height: 36px;
  text-align: center;
}

.el-row{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.smc-code {
  @include smc-btn;
  background: rgb(255, 216, 30);
  color: #142338;

  &:hover {
    cursor: pointer;
  }
}

/*禁止点击 */
.no-smc-code {
  @include smc-btn;
  background: #f2f3f7;
  color: #abacb0;
  pointer-events: none;
  // cursor:no-drop
}

.submit {
  text-align: center;

  .submit-btn {
    height: 42px;
    width: 100%;
    margin-top: 22px;
    margin-bottom: 10px;
  }
}
</style>
